<template>
<div id="page-box">
  <div id="logo">
    <img src="http://127.0.0.1:9000/upload/admin.jpg" alt="">
    <h1>{{ text }}</h1>
  </div>
  
  <div id="message-list">
    <div class="message">
      hahah
    </div>
  </div>

  <div id="text-input">
    <textarea name="" id="" cols="30" rows="10"></textarea>
    <button>发送</button>
  </div>

</div>
</template>

<script>
// axios
import axios from 'axios';


// 获取数据
// function getData() {
//   axios({
//         method: 'get',
//         url: 'http://127.0.0.1:9000/api/',
//       }).then((res) => {
//         console.log(res)
//         text.value = res.data.test
//       })
// }

// // 初始化websocket
// function initWebSocket() {
//   var websocket = new WebSocket("ws://127.0.0.1:9000/chat/")
//   console.log()
//   websocket.onopen = onOpen
//   websocket.onmessage = onMessage
//   websocket.onerror = onError
//   websocket.onclose = onClose
// }


// // message 打开链接
// function onOpen(e){
//   console.log('ws链接打开')
//   console.log(e)

//   // let msg = {
//   //   code: 100,
//   //   content:'链接成功'
//   // }

// }

// //接收 message
// function onMessage(){

// }

// // 报错
// function onError(){

// }
// function onClose(){

// }


// getData()
// initWebSocket()

// function sendMessage(msg) {
//   websocket.send(msg)
// }


export default {
  data() {
    return {
      text: ''
    }
  },

  mounted() {
    this.getData()
    this.initWebSocket()
  },


  methods: {
    // 获取数据
    getData() {
      axios({
        method: 'get',
        url: 'http://127.0.0.1:9000/api/',
      }).then((res) => {
        console.log(res)
        this.text = res.data.test
      })
    },

    // 初始化websocket
    initWebSocket() {
      this.websocket = new WebSocket("ws://127.0.0.1:9000/chat/")
      console.log()
      this.websocket.onopen = this.onOpen
      this.websocket.onmessage = this.onMessage
      this.websocket.onerror = this.onError
      this.websocket.onclose = this.onClose
    },


    // message 打开链接
    onOpen(e){
      console.log('ws链接打开')
      console.log(e)

      let msg = {
        code: 100,
        message:'connecting'
      }

      this.sendMessage(msg)

    },

    //接收 message
    onMessage(e){
      console.log(e)
      let message = JSON.parse(e.data)
      console.log(message)
    },

    // 报错
    onError(){

    },
    onClose(){

    },


    sendMessage(msg) {
      let text_data = JSON.stringify(msg)
      this.websocket.send(text_data)
    },
  }
}




</script>

<style>
  #page-box{
    width: 300px;
    height: 600px;
    box-shadow: 0 2px 12px 0 #00000060;
    margin: 0 auto;
  }
  #logo{
    background: #00000000;
    color: #ddd;
    text-align: center;
    font-size: 12px;
    padding: 10px;
    height: 130px;
  }
  #logo img{
    width: 80px;
    height: 80px;
  }
  #message-list{
    height: 370px;
    background: #00000030;
    padding: 10px;
  }
  #text-input{
    height: 80px;
    background: #00000010;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  #text-input textarea{
    width: 200px;
    height: 70px;
  }

  #text-input button{
    width: 100px;
    height: 70px;
    background: #f5cb13;
    border: none;
    border-radius: 15px;
    font-size: 18px;
    font-weight: 700;
    color: #00000060;
  }
  #text-input button:hover{
    background: #836f15;
  }

  .message{
    width: 120px;
    background: #f5cb13;
    text-align: center;
    padding: 5px;
    border-radius: 10px;
    font-size: 18px;
    font-weight: 700;
    color: #00000080;
  }
  
</style>
